<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
</head>
<body>
	<form action="1.html" method="post" onsubmit="return sub()" >
		用户名：<input type="text" id="names" onfocus="func()" onblur="funcc()" ><span id="s1" ></span><br><br>
		密码：<input type="password" id="password" onfocus="demo()" onblur="demo1()" ><span id="s2" ></span><br><br>
		<input type="submit" value="提交信息" >
	</form>
</body>
	<script>
		names = document.getElementById("names");
		psd = document.getElementById("password");
		s1 = document.getElementById("s1");
		s2 = document.getElementById("s2");
		function func(){
			s1.innerHTML = "请输入4-8位任意字母数字下划线";
			s1.style.color="red";
		}
		function funcc(){
			namess = names.value;
			if(namess.match(/^\w{4,8}$/)==null){
				s1.innerHTML = "请正确输入用户名";
				s1.style.color="red";
				return false;
			}else{
				s1.innerHTML = "正确";
				s1.style.color="green";
				return true;
			}
		}
		function demo(){
			s2.innerHTML = "请输入6-14位任意字母数字下划线为密码";
			s2.style.color="red";
		}
		function demo1(){
			psds = psd.value;
			if(psds.match(/^\w{6,14}$/)==null){
				s2.innerHTML = "请正确输入密码";
				s2.style.color="red";
				return false;
			}else{
				s2.innerHTML = "正确";
				s2.style.color="green";
				return true;
			}
		}
		function sub(){
			return funcc()&&demo1();
		}
	</script>
</html>